<template>
  <div>
    <div class="white-box net zkWeb">
      <header>
        <div>
          <div>
            <div @click="create_node(null,0)" class="text-active text-default m-l-10 pull-right c-p sousuo">创建根节点</div>
          </div>
        </div>
      </header>
      <section>
        <div class="table-container">
          <h5 class="title">zk文件系统</h5>
          <el-table
            :data="dataList"
            style="width: 100%"
            row-key="id"
            lazy
            stripe
            border
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="name" label="文件名称"></el-table-column>
            <el-table-column  label="操作节点" >
              <template slot-scope="scope">
                <div>
                  <td class="color-default c-p w-n" @click="get_node(scope.row)">
                    <i class="iconfont icon-chakan m-r-5"></i>节点详情
                  </td>
                  <td class="color-default c-p w-n" @click="create_node(scope.row,1)">
                    <i class="iconfont icon-tianjia- m-r-5"></i>创建子节点
                  </td>
                  <td class="color-default c-p w-n" @click="update_node(scope.row)">
                    <i class="iconfont icon-bianji m-r-5"></i>修改节点
                  </td>
                  <td class="color-default c-p w-n" @click="deleteRows(scope.row)">
                    <i class="iconfont icon-remove-1-copy m-r-5"></i>删除节点
                  </td>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          title="新增节点信息"
          ref="dialog1"
          v-dialogDrag
          class="f-s-15 netPage"
          v-if="dialogVisible1"
          :visible.sync="dialogVisible1"
          width="30%"
          custom-class="NatureDialog">
          <i class="iconfont icon-tianjia-" style="position: absolute;top: 15px;left: 10px;color: #81939F;"></i>
          <el-form :model="ruleForm" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <div class="f-s-13" v-show="showError" style="text-align: center;    margin-bottom: 20px;
    color: #f00;">{{errorMessage}}
            </div>
            <div class="pull-left" id="ipContainer">
              <div class="form-container d-b m-t-5">
                <label class="label" style="width: 190px;margin-right: 0;padding-right: 0;">{{nodeName}}&nbsp;&nbsp;</label>
                <el-input style="width: 400px;" v-model="ruleForm.name" placeholder="长度1-15个字符"></el-input>
              </div>
             <div style="text-align:center;">
               <br>
               <br>
               <br>
               <el-radio v-model="ruleForm.type" label="0">持久节点</el-radio>
               <el-radio v-model="ruleForm.type" label="1">临时节点</el-radio>
               <br>
               <el-radio v-model="ruleForm.type" label="2">持久顺序节点</el-radio>
               <el-radio v-model="ruleForm.type" label="3">临时顺序节点</el-radio>
               <br>
               <br>
               <span>节点信息</span>
               <br>
               <el-input style="width: 105%" type="textarea" v-model="ruleForm.nodeValue"></el-input>
             </div>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="submitForm()">保 存</el-button>
  </span>
        </el-dialog>
        <el-dialog
          title="编辑节点信息"
          ref="dialog1"
          v-dialogDrag
          class="f-s-15 netPage"
          v-if="dialogVisible2"
          :visible.sync="dialogVisible2"
          width="30%">
          <i class="iconfont icon-tianjia-" style="position: absolute;top: 15px;left: 10px;color: #81939F;"></i>
          <el-form ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <div class="f-s-13" v-show="showError1" style="text-align: center;margin-bottom: 20px;color: #f00;">{{errorMessage1}}</div>
            <div style="text-align: center;">

              <div class="form-container d-b m-t-5" >
                <el-form-item label="根路径：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeName" placeholder="长度1-15个字符" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <br>
              <div class="pull-left" id="ipContainer1">
                <el-form-item label="节点信息：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeValue" placeholder="长度1-15个字符"></el-input>
                </el-form-item>
              </div>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="submitFormUpdate()">保 存</el-button>
  </span>
        </el-dialog>
        <el-dialog
          title="节点信息详情"
          ref="dialog1"
          v-dialogDrag
          class="f-s-15 netPage"
          v-if="dialogVisible3"
          :visible.sync="dialogVisible3"
          width="90%"
          custom-class="NatureDialog1">
          <i class="iconfont icon-tianjia-" style="position: absolute;top: 15px;left: 10px;color: #81939F;"></i>
          <el-form ref="ruleForm" label-width="150px" class="demo-ruleForm">
            <div style="text-align: center;">
              <div class="form-container d-b m-t-5" >
                <el-form-item label="根路径：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeDetails.nodeValue" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <div class="form-container d-b m-t-5" >
                <el-form-item label="节点：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeDetails.name" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <div class="form-container d-b m-t-5" >
                <el-form-item label="节点值：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeDetails.node" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <div class="form-container d-b m-t-5" >
                <el-form-item label="创建时间：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeDetails.ctime" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <div class="form-container d-b m-t-5" >
                <el-form-item label="最后修改时间：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeDetails.mtime" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <div class="form-container d-b m-t-5" >
                <el-form-item label="znode上数据变化的次数：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeDetails.version" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <div class="form-container d-b m-t-5" >
                <el-form-item label="znode子结点变化的次数：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeDetails.cversion" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <div class="form-container d-b m-t-5" >
                <el-form-item label="znode数据域的长度：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeDetails.dataLength" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <div class="form-container d-b m-t-5" >
                <el-form-item label="znode中子结点的个数：" prop="name">
                  <el-input style="width: 400px;" v-model="nodeDetails.numChildren" :disabled="true"></el-input>
                </el-form-item>
              </div>
              <br>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible3 = false">关 闭</el-button>
  </span>
        </el-dialog>
        <!--删除提示-->
        <el-dialog
          class="deleteConfirm"
          title="提示"
          :visible.sync="dialogVisible4"
          width="30%">
          <span>{{deleteText}}</span>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible4 = false">取 消</el-button>
    <el-button v-show="!deleteError" type="primary" @click="deleteSure">确 定</el-button>
    <el-button v-show="deleteError" type="primary" @click="dialogVisible4 = false">确 定</el-button>
  </span>
        </el-dialog>
      </section>
    </div>
  </div>
</template>
<style scoped lang="less" type="text/less">
  .addFirst {
    right: -28px !important;
  }
  .text-down {
    /*min-width: 4rem;*/
    /*width: auto;*/
  }
  #fileInput {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 0;
    height: 100%;
    opacity: 0;
    z-index: 22;
    cursor: pointer;
  }
  .newTitle1 {
    height: 3.5rem;
    margin-bottom: 10px;
    background: #fff;
    display: flex;
    .titleImg {
      float: left;
      height: 100%;
      width: auto;
    }
    .titleContainer {
      flex: 1;
      display: flex;
      .titleFlow {
        border: 1px solid transparent;
        flex: 1;
        height: 3.5rem;
        line-height: 3.5rem;
        text-align: center;
        position: relative;
        -webkit-box-shadow: 0 4px 5px #ededed;
        -moz-box-shadow: 0 4px 5px #ededed;
        box-shadow: 0 4px 5px #ededed;
        span:first-child {
          font-size: 12px;
          margin-right: 5px;
        }
        span:nth-child(2) {
          font-size: 16px;
          font-weight: 600;
        }
      }
      .titleFlow:hover {
        background: #EFF8FF;
      }
      .titleFlow4 {
        div {
          height: 1.7rem;
          line-height: 1.7rem;
          .number {
            font-size: 16px;
            font-weight: 600;
            margin: 0 5px;
          }
        }
      }
      .titleActive {
        border: 1px solid #409eff;
        background: #EFF8FF;
        position: relative;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
      }
      .titleActive:after {
        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 18px;
        height: 18px;
        background-size: 100% auto;;
      }
    }
  }
  .netPage .box {
    width: auto;
  }
  .ipError {
    color: #f56c6c;
    float: left;
    margin-left: 80px;
    font-size: 12px;
    display: none;
  }
  .netPage {
    .label {
      margin: 0;
      padding: 0;
      width: 120px !important;
    }
  }
  section {
    .table-container {
      width: 100%;
      background: #fff;
      margin-top: 0.5rem;
      height: 40.5rem;
      overflow: auto;
    }
  }
  @media screen and (max-width: 1400px) {
    .table-container {
      height: 39rem !important;
    }
  }
  .title-i {
    position: absolute;
    left: 0;
    width: 2px;
    height: 16px;
    top: 11px;
    background: #409EFF;
    z-index: 2019;
  }
  .title-r {
    background: #e4393c;
  }
  th {
    background: #EBEFF2;
  }
  .status {
    height: 38px;
    line-height: 38px;
    .checkbox {
      vertical-align: middle;
    }
  }
  .ip {
    width: 24%;
    margin-right: 1%;
  }
  .active {
    background: #409EFF;
    border-color: #409eff;
    color: #fff;
  }

  .form-container {
    .input {
      max-width: 300px;
    }
  }
  .sousuo::-webkit-input-placeholder {
    color: #555 !important;
  }
</style>
<script>
  export default {
    data() {
      return {
        nodeValues : [],
        nodeValue : "",
        number : 0,
        type : 0,
        portError: false,
        active: true,
        dataList: [],
        nodeName: "",
        dialogVisible4: false,
        deleteText: "确定删除吗？",
        deleteError: false,
        isLoading: false,
        updating: false,
        text : "zookeeper文件名称",
        submitType: "create_node",
        showError: false,
        errorMessage: "",
        dialogVisible1: false,
        dialogVisible2 : false,
        dialogVisible3 : false,
        showError1: false,
        errorMessage1: "",
        nodeDetails:{},
        uploadData:{
          tree:null,
          treeNode:null,
          resolve:null
        },
        ruleForm: {
          names: [{
            name: '',
            nodeValue: '',
            type: 0,
          }],
        },
      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.queryNet();
      })
    },
    methods: {
      load(tree, treeNode, resolve){
        // tree为点击那一行的数据
        let url = this.$store.state.port + "node/get_child";
        this.isLoading = true;
        let data = {
          path : tree.names,
        }
        url += "?" + this.$qs.stringify(data);
        this.$axios.get(url).then(response => {
          this.isLoading = false;
          if (response && response.data.code == "0") {
            let data = response.data && response.data.data || [];
            if (data.length != 0){
              let dataList = [];
              for (let i = 0; i < data.length; i++) {
                this.number += 1;
                dataList.push(
                  {
                    id : this.number,
                    name : "/" + data[i],
                    names: tree.name + "/" + data[i],
                    hasChildren:true,
                  }
                )
              }
              resolve(dataList);
            } else {
              resolve([]);
            }
          }
        }).catch(e => {
          this.isLoading = false;
        })
      },
      get_node (row){
        let url = this.$store.state.port + "node/get_node";
        this.isLoading = true;
        let data = {
          path : row.names,
        }
        url += "?" + this.$qs.stringify(data);
        this.$axios.get(url).then(response => {
          this.isLoading = false;
          if (response && response.data.code == "0") {
            let data = response.data && response.data.data || [];
            let stat = data.stat;
            this.nodeDetails = {
              nodeValue : row.names,
              name : row.name,
              node: data.nodeValue,
              ctime: this.$moment(new Date(stat.ctime)).format('YYYY-MM-DD HH:mm:ss'),
              mtime: this.$moment(new Date(stat.mtime)).format('YYYY-MM-DD HH:mm:ss'),
              cversion: stat.cversion,
              version: stat.version,
              dataLength : stat.dataLength,
              numChildren: stat.numChildren,
            };
            this.dialogVisible3 = true;
          }
        }).catch(e => {
          this.isLoading = false;
        })
      },
      create_node (row,type) {
          // type 0: 根节点新增; 1: 子节点新增
          if (type == 0){
            this.nodeName = "/";
          } else {
            this.nodeName = row.name + "/";
          }
          this.dialogVisible1 = true;
        },
      update_node (row){
          let url = this.$store.state.port + "node/get_node";
          this.isLoading = true;
          let data = {
            path : row.names,
          }
          url += "?" + this.$qs.stringify(data);
          this.$axios.get(url).then(response => {
            this.isLoading = false;
            if (response && response.data.code == "0") {
              let data = response.data && response.data.data || [];
              this.nodeValue = data.nodeValue;
              this.nodeName = row.names;
              this.nodeValues = row;
              this.dialogVisible2 = true;
            }
          }).catch(e => {
            this.isLoading = false;
          })

        },
      refreshData() {
          if (this.searchName) {
            this.queryNet();
          }
        },
      //获取表格数据
      queryNet() {
          if (this.isLoading) {
            return;
          }
          this.dataList.splice(0, this.dataList.length);
          let url = this.$store.state.port + "node/get_child";
          this.isLoading = true;
          this.$axios.get(url).then(response => {
            this.isLoading = false;
            if (response && response.data.code == "0") {
             let data = response.data && response.data.data || [];
              for (let i = 0; i < data.length; i++) {
                this.number += 1;
                this.dataList.push({id:this.number, "name":"/"+data[i], "names":"/"+data[i], hasChildren:true});
              }
            } else {
              this.dataList = [];
            }
          }).catch(e => {
            this.isLoading = false;
            this.dataList = [];
          })
        },
      deleteRows: function (row) {
          this.nodeValues = row;
          this.dialogVisible4 = true;
          this.deleteText = '确定删除吗, 以及子节点吗?';
          this.deleteError = false;
        },
      deleteSure() {
          let url = this.$store.state.port + "/node/delete_node";
          let data = {
            nodeName: this.nodeValues.name,
            recursionFlag : 1,
          };
          this.$axios.post(url, this.$qs.stringify(data)).then(response => {
            if (response.data && response.data.code == 0) {
              this.dialogVisible4 = false;
              this.queryNet();
              this.nodeValues = [];
            }
            else {
              this.dialogVisible4 = true;
              this.deleteText = response.data.message;
              this.deleteError = true;
            }
          }).catch(e => {
            this.dialogVisible4 = true;
            this.deleteText = "服务器错误！";
            this.deleteError = true;
          });
        },
      submitForm() {
          let url = this.$store.state.port + "node/" + this.submitType;
          let data ={
            nodeName: this.nodeName + this.ruleForm.name,
            nodeValue: this.ruleForm.nodeValue,
            type: this.ruleForm.type,
          };
          if (this.submitType == "update_node") {
            data.id = this.orgId;
          }
          this.updating = true;
          this.$axios.post(url, this.$qs.stringify(data)).then(response => {
            this.updating = false;
            if (response.data.code == 0) {
              this.showError = false;
              this.errorMessage = "";
              this.dialogVisible1 = false;
              this.clearForm();
              this.queryNet();
              $(".sweet-alert").hide();
              $(".sweet-overlay").hide();
            } else {
              this.showError = true;
              this.errorMessage = response.data.message;
              this.dialogVisible1 = true;
            }
          }).catch(e => {
            this.updating = false;
            this.showError = true;
            this.errorMessage = "操作失败，服务器错误";
            this.dialogVisible1 = true;
          });
        },
      submitFormUpdate() {
        let url = this.$store.state.port + "node/update_node";
        let data ={
          nodeName: this.nodeName,
          nodeValue: this.nodeValue,
        };
        this.updating = true;
        this.$axios.post(url, this.$qs.stringify(data)).then(response => {
          this.updating = false;
          if (response.data.code == 0) {
            this.showError = false;
            this.errorMessage = "";
            this.dialogVisible2 = false;
            this.clearForm();
            this.queryNet();
            this.nodeName = "";
            this.nodeValue = "";
            this.nodeValues = [];
            $(".sweet-alert").hide();
            $(".sweet-overlay").hide();
          } else {
            this.showError = true;
            this.errorMessage = response.data.message;
            this.dialogVisible2 = true;
          }
        }).catch(e => {
          this.updating = false;
          this.showError = true;
          this.errorMessage = "操作失败，服务器错误";
          this.dialogVisible2 = true;
        });
      },
      clearForm(){
        this.nodeName = "";
        this.ruleForm.name = "";
        this.ruleForm.nodeValue = "";
        this.ruleForm.type = "";
      }
    }
  }
</script>
